<template>
    <div
        :style="STYLE"
        class="action-bar">
        <!-- 是否显示可滑动条 -->
        <div
            class="flex-center slide-line"
            v-if="routerType === 'POPUP'">
            <div
                class="slide-line-content"
                v-if="isAndroid"></div>
        </div>
        <div
            :style="HEIGHT"
            class="flex-center header">
            <div class="action">
                <slot name="left">
                    <div
                        :style="rowReverse"
                        class="flex-center flex-start left">
                        <van-icon
                            :color="color"
                            :name="ARROW"
                            :size="size"
                            @click="onBack" />
                    </div>
                </slot>
            </div>
            <span
                :style="langDirection"
                class="text-ellipsis title">
                <slot name="center">
                    {{ TITLE }}
                </slot>
            </span>
            <div
                :style="rowReverse"
                class="flex-center action">
                <slot name="right"></slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { computed, inject } from 'vue';
    import { mainStore } from '@/store/main';
    import { useRouter } from 'vue-router';
    import { closeWebview } from '@utils/NativeUtils';
    import { isAndroid } from '@/utils/common';
    // Props
    interface Props {
        height?: string | number; // 标题栏高度
        title?: string; // 标题
        color?: string; // 填充模式
        backColor?: string; // 每秒钟的帧数
        action?: 'BACK' | 'CLOSE' | undefined;
        size?: string | number; // icon大小
        routerType?: 'PAGE' | 'POPUP'; // 当前类型是页面还是弹窗
    }

    const props = withDefaults(defineProps<Props>(), {
        height: 80, // 标题栏高度
        title: '', // 标题
        color: '#FFFFFF', // 前景色
        backColor: 'transparent', // 整个标题栏的背景色
        action: undefined,
        size: 20, // icon大小
        routerType: 'PAGE',
    });

    // Emits
    const emit = defineEmits(['back']);

    const STYLE = computed(() => `background: ${props.backColor};`);

    const HEIGHT = computed(() => {
        let _h = `height: ${props.height};line-height: ${props.height};`;
        if (typeof props.height === 'number') {
            const pxReference = window.innerWidth / 10;
            _h = `height: ${props.height / pxReference}rem;line-height: ${
                props.height / pxReference
            }rem;`;
        }
        return `${_h}color:${props.color};`;
    });

    const isRtl: boolean = inject('$isRtl', false);
    const rowReverse: string = inject('$rowReverse');
    const langDirection: string = inject('$langDirection');
    const ARROW = computed(() => `${isRtl ? 'arrow' : 'arrow-left'}`);

    const TITLE = computed(() =>
        props.title?.toLocaleLowerCase() === 'default' ? mainStore().GET_TITLE : props.title
    );

    const router = useRouter();
    const onBack = () => {
        emit('back');
        if (props.action === 'BACK') {
            router.back();
        }
        if (props.action === 'CLOSE') {
            if (!closeWebview()) {
                if (window.history.state.position > 0) {
                    router.go(-1);
                } else {
                    router.replace('/');
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
    .action-bar {
        position: relative;
        @include safeArea(padding-top, pxToRem(5));
        top: 0;
        left: 0;
        width: 100%;
        z-index: 999;
    }

    .slide-line {
        width: 100%;
        height: pxToRem(20);
        .slide-line-content {
            width: pxToRem(60);
            height: pxToRem(4);
            background: rgba(255, 255, 255, 0.6);
            border-radius: pxToRem(5);
        }
    }

    .header {
        .action {
            width: max-content;
            min-height: pxToRem(1);
            flex: 1 1 pxToRem(106);

            .left {
                padding: 0 pxToRem(16);
            }

            ::v-deep(.van-icon) {
                font-weight: bolder;
                font-size: pxToRem(28);
            }
        }

        .title {
            padding: 0 pxToRem(4);
            width: 100%;
            flex: 1 1 auto;
            font-weight: bold;
            font-size: pxToRem(15);
            text-align: center !important;
            white-space: nowrap;
        }
    }
</style>
